<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>整机买卖/租赁出租/配件商城</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <style>
        .sectionPadding {
            padding-top: .45rem;
        }

        .cz-list-img img {
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="app" v-cloak>
        <div class="peijianshangcheng fixed-tab">
            <div class="main">
                <div class="aside navs">
                    <ul>
                        <li class="nav-item flex-x-c" v-for="nav in listCategories" @click="toggleNav(nav)">
                            <a href="#"
                                :class="['nav-link', {active: selectedCategories === nav.name}]">{{nav.name}}</a>
                        </li>
                    </ul>
                </div>
                <div class="common-filter-tab">
                    <div class="common-filter-nav" @click="select(0)">
                        <span>类型</span>
                        <span class="iconfont">&#xe665;</span>
                    </div>
                    <div class="common-filter-nav" @click="forwardPage('brand_select_win', '../select/')">
                        <span>品牌</span>
                        <span class="iconfont">&#xe665;</span>
                    </div>
                    <div class="common-filter-nav" @click="forwardPage('area_select_win', '../select/')">
                        <span>地区</span>
                        <span class="iconfont">&#xe665;</span>
                    </div>
                    <div class="common-filter-nav" @click="select(1)">
                        <span>{{title == 'PARTS' ? '价格' : '更多'}}</span>
                        <span class="iconfont">&#xe665;</span>
                    </div>
                </div>
                <div class="section" :class="{sectionPadding:swipeList && swipeList.length == 0}">
                    <van-pull-refresh v-model="pullRefreshLoading" @refresh="pullDownRefresh" pulling-text="下拉更新有惊喜"
                        loosing-text="松开可以刷新">
                        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
                            offset="50" :style="'min-height: '+ rightHeight+ 'px;'">
                            <van-swipe v-if="swipeList && swipeList.length > 0" class="sell-swipe" :autoplay="3000"
                                indicator-color="3F8CEC" :touchable="false">
                                <van-swipe-item v-for="(img, index) in swipeList" :key="img.target">
                                    <img v-lazy="img.imageUrl?img.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/loading3.png'" alt=""
                                        @click="gotoDetail({id: img.target})">
                                </van-swipe-item>
                            </van-swipe>
                            <div class="cangchu whole_sale" v-if="listData&&listData.length>0">
                                <div class="cangchu-item" v-for="(goods,index) in listData" :key="index"
                                    @click="gotoDetail(goods)">
                                    <div class="cz-list-img"
                                        :class="{new:(goods.oldYear == 0 && title == 'LEASE_DEVICE'),old:(goods.oldYear>0 && title == 'LEASE_DEVICE')}">
                                        <img v-lazy="goods.imageUrl?goods.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/loading3.png'"
                                            alt="" class="preview-img">
                                    </div>
                                    <div class="right">
                                        <p class="cangchu-name" v-text="goods.title"></p>
                                        <div class="info">
                                            <div class="info-item">距离：{{goods.countDistance}} </div>
                                        </div>
                                        <div class="price">
                                            <div v-if="goods.price<=10000 && goods.price!==null" class="unit-price"
                                                style="margin: 0;padding: 0;">¥</div>
                                            {{goods.price | filterPrice}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </div>
            <div class="release" @click="goEdit('release_edit_win', '../release/')">
                <div class="release-icon"></div>
                <div class="release-text">发布</div>
            </div>
        </div>
        <van-popup v-model="show" position="right" :style="{ height: '100%',width:'77%' }" @close="closePopup">
            <div class="screen-condition">
                <div v-if="wxIndex == 1">
                    <div class="screen-condition-space" v-for="(condition,index) in conditionInputList" :key="index">
                        <div class="condition-title">{{condition.typeName}}</div>
                        <div class="screen-condition-list flex-x-s">
                            <input type="number" :placeholder="condition.min" v-model="condition.minVal" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="line"></div>
                            <input type="number" :placeholder="condition.max" v-model="condition.maxVal" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                        </div>
                    </div>
                    <div class="screen-condition-space" v-for="(condition,index) in conditionList" :key="index" v-if="condition.typeName != '新旧程度'">
                        <div class="condition-title">{{condition.typeName}}</div>
                        <div class="screen-condition-list flex-x-s flex-wrap">
                            <div class="screen-condition-item" v-for="(conditionItem,idx) in condition.list" :key="idx"
                                @click="selectconditionItem(idx,conditionItem,condition)"
                                :class="{active:conditionItem.selected}">
                                {{conditionItem.name}}
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <div class="screen-condition-space" v-for="(condition,index) in conditionList" :key="index">
                        <div class="condition-title">{{condition.typeName}}</div>
                        <div class="screen-condition-list flex-x-s flex-wrap">
                            <div class="screen-condition-item" v-for="(conditionItem,idx) in condition.list" :key="idx"
                                @click="selectCondition(idx,conditionItem)" :class="{active:idx == conditionCurIndex}">
                                {{conditionItem.name}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="screen-confirm" @click="confirm">确定</div>
        </van-popup>
    </div>
    <script src="../../script/api.js "></script>
    <script src="../../script/flexible.js "></script>
    <script src="../../script/fastclick.js "></script>
    <script src="../../script/vue.min.js "></script>
    <script src="../../script/iconfont.js "></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script>
        apiready = function () {
            imgLazyLoad();
            var vm = new Vue({
                el: '.app',
                data() {
                    return {
                        count: 0,
                        loading: false,
                        pullRefreshLoading: false,
                        finished: true,
                        listMoreIndex: [-1, -1],
                        isConfirmMore: false,
                        refreshing: false,
                        copyConditionInputList:[],
                        conditionInputList: [{
                            typeName: '价格（元）',
                            min: '最低价',
                            max: '最高价',
                            minVal: '',
                            maxVal: ''
                        }, {
                            typeName: '工作时长（小时）',
                            min: '最低时长',
                            max: '最高时长',
                            minVal: '',
                            maxVal: ''
                        }],
                        swipeList: [],
                        show: false,
                        wxIndex: 0,
                        listCategories: [],
                        selectedCategories: undefined,
                        conditionCurIndex: 0,
                        conditionCurItem: null,
                        conditionList: [],
                        conditionName: [],
                        conditionIndexObj: {
                            typeIndex: 0
                        },
                        typeSelectData: [],
                        // 列表查询参数
                        queryParam: {
                            // types 类型：0设备售卖 1设备出租 2配件
                            types: [],
                            areaIds: [],
                            brandIds: [],
                            categoryIds: [],
                            ids: [],
                            keyword: null,
                            location: null,
                            maxDistance: null,
                            maxOldYear: null,
                            maxPrice: null,
                            maxWorkHour: null,
                            minDistance: null,
                            minOldYear: null,
                            minPrice: null,
                            minWorkHour: null,
                            modelIds: [],
                            newed: null,
                            orderBy: null,
                            pageNum: 1,
                            pageSize: 10,
                            queryOwn: null,
                            recommended: null,
                            status: 1,
                            typeIds: [],
                            checkStatus: 1
                        },
                        moreList: [{
                            typeName: '新旧程度',
                            list: [{
                                name: "全部",
                                maxOldYear: null,
                                minOldYear: null,
                                selected: false
                            }, {
                                name: "新机",
                                maxOldYear: 1,
                                minOldYear: 0,
                                min: 0,
                                selected: false
                            }, {
                                name: "1-3年",
                                maxOldYear: 3,
                                minOldYear: 1,
                                selected: false
                            }, {
                                name: "3年以上",
                                maxOldYear: null,
                                minOldYear: 3,
                                selected: false
                            }]
                        }, {
                            typeName: '排序',
                            list: [{
                                name: "距离由近及远",
                                orderBy: 'DISTANCE_ASC',
                                selected: false
                            }, {
                                name: "更新时间最新",
                                orderBy: 'UPDATE_TIME_DESC',
                                selected: false
                            }, {
                                name: "小时数小到大",
                                orderBy: 'WORK_HOUR_ASC',
                                selected: false
                            }, {
                                name: "价格从低到高",
                                orderBy: 'PRICE_ASC',
                                selected: false
                            }]
                        }],
                        // 列表数据
                        listData: [],
                        // 类型 0整机买卖 1租赁出租 2配件
                        categoriesType: 0,
                        title: '',
                        authStatus: {
                            merchant: -1,
                            personal: -1
                        },
                        rightHeight: 754
                    }
                },
                filters: {
                    filterPrice: filterPrice
                },
                mounted: function () {
                    this.rightHeight = api.frameHeight - 40
                    var vm = this
                    vm.init()
                    vm.initBlur()
                    vm.queryParam.types = [vm.categoriesType]
                    var location = api.getPrefs({
                            sync: true,
                            key: 'location_home'
                        })||{}
                    // var location = $api.getStorage('location_home') || {}
                    vm.queryParam.location = JSON.parse(location).location;
                    vm.initCategories()
                    vm.getAuthorizationStatus()
                },
                methods: {
                    initBlur() {
                        var vm = this
                        if (api.systemType == 'android') {
                            //获取原窗口的高度
                            var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
                            window.onresize = function () {
                                //键盘弹起与隐藏都会引起窗口的高度发生变化
                                var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
                                if (resizeHeight - 0 < originalHeight - 0) {
                                    //当软键盘弹起，在此处操作
                                    console.log('android弹起');
                                    vm.judgeVal()
                                } else {
                                    //当软键盘收起，在此处操作
                                    console.log('android收起');
                                    vm.judgeVal()
                                }
                            };
                        }
                        if (api.systemType == 'ios') {
                            document.body.addEventListener("focusin", () => {
                                //软键盘弹出的事件处理
                                console.log('ios弹起');
                                vm.judgeVal()
                            });
                            document.body.addEventListener("focusout", () => {
                                //软键盘收起的事件处理
                                console.log('ios收起');
                                vm.judgeVal()
                            });
                        }
                    },
                    judgeVal() {
                        for (let item of this.conditionInputList) {
                            if (item.typeName == "价格（元）" && item.maxVal !== '' && item.minVal !== '') {
                                let copyVal = item.minVal
                                if (Number(item.maxVal) < Number(item.minVal)) {
                                    item.minVal = item.maxVal
                                    item.maxVal = copyVal
                                }
                            } else if (item.typeName == "工作时长（小时）" && item.maxVal !== '' && item.minVal !== '') {
                                let copyVal = item.minVal
                                if (Number(item.maxVal) < Number(item.minVal)) {
                                    item.minVal = item.maxVal
                                    item.maxVal = copyVal
                                }
                            }
                        }
                    },
                    /**
                     * 下拉刷新
                     */
                    pullDownRefresh: function () {
                        // 清空列表数据
                        this.finished = false;
                        this.listData = []
                        // 重新加载数据
                        // 将 loading 设置为 true，表示处于加载状态
                        this.loading = true;
                        this.pullRefreshLoading = false;
                        this.queryParam.pageNum = 1
                        this.getListDatas()
                    },

                    getAuthorizationStatus() {
                        let vm = this
                        mime("getAuthorizationStatus")(function (ret) {
                            vm.authStatus.merchant = ret.data.merchant
                            vm.authStatus.personal = ret.data.personal
                        })
                    },
                    init() {
                        var vm = this
                        var title = api.pageParam.title
                        this.title = title
                        if (title === "SELL_DEVICE") {
                            vm.categoriesType = 0
                        } else if (title === "LEASE_DEVICE") {
                            vm.categoriesType = 1
                        } else if (title === "PARTS") {
                            vm.categoriesType = 2
                            vm.listMoreIndex = []
                            vm.conditionInputList = [{
                                    typeName: '价格（元）',
                                    min: '最低价',
                                    max: '最高价',
                                    minVal: '',
                                    maxVal: ''
                                }],
                            vm.moreList = []
                        }
                    },
                    onLoad() {
                        this.getListDatas()
                    },
                    toggleNav(nav) {
                        let vm = this
                        vm.activeNav = nav.name
                        vm.selectedCategories = nav.name;
                        vm.queryParam.categoryIds = [nav.id]
                        vm.conditionIndexObj.typeIndex = 0
                        vm.queryParam.pageNum = 1
                        vm.listData = []
                        vm.initQueryParam()
                        vm.getListDatas()
                        vm.initTypeSelect(nav.id)
                        vm.getBanner(nav.id)
                    },
                    initQueryParam(){
                        vm.queryParam.maxOldYear = ''
                        vm.queryParam.minOldYear = ''
                        vm.queryParam.orderBy = ''
                        vm.queryParam.maxPrice = ''
                        vm.queryParam.minPrice = ''
                        vm.queryParam.maxWorkHour = ''
                        vm.queryParam.minWorkHour = ''
                        vm.queryParam.areaIds = ''
                        vm.queryParam.brandIds = ''
                        vm.queryParam.typeIds = ''
                        vm.listMoreIndex = [-1, -1]
                        if (vm.queryParam.types == 2){
                            vm.listMoreIndex = []
                            vm.conditionInputList = [{
                                    typeName: '价格（元）',
                                    min: '最低价',
                                    max: '最高价',
                                    minVal: '',
                                    maxVal: ''
                                }],
                            vm.moreList = []
                        }else{
                            vm.moreList = [{
                                typeName: '新旧程度',
                                list: [{
                                    name: "全部",
                                    maxOldYear: null,
                                    minOldYear: null,
                                    selected: false
                                }, {
                                    name: "新机",
                                    maxOldYear: 1,
                                    minOldYear: 0,
                                    min: 0,
                                    selected: false
                                }, {
                                    name: "1-3年",
                                    maxOldYear: 3,
                                    minOldYear: 1,
                                    selected: false
                                }, {
                                    name: "3年以上",
                                    maxOldYear: null,
                                    minOldYear: 3,
                                    selected: false
                                }]
                            }, {
                                typeName: '排序',
                                list: [{
                                    name: "距离由近及远",
                                    orderBy: 'DISTANCE_ASC',
                                    selected: false
                                }, {
                                    name: "更新时间最新",
                                    orderBy: 'UPDATE_TIME_DESC',
                                    selected: false
                                }, {
                                    name: "小时数小到大",
                                    orderBy: 'WORK_HOUR_ASC',
                                    selected: false
                                }, {
                                    name: "价格从低到高",
                                    orderBy: 'PRICE_ASC',
                                    selected: false
                                }]
                            }]
                            vm.conditionInputList = [{
                                typeName: '价格（元）',
                                min: '最低价',
                                max: '最高价',
                                minVal: '',
                                maxVal: ''
                            }, {
                                typeName: '工作时长（小时）',
                                min: '最低时长',
                                max: '最高时长',
                                minVal: '',
                                maxVal: ''
                            }]
                        }
                        
                    },
                    initCategories: function () {
                        let vm = this
                        release("getCategories")(0, null, vm.categoriesType, function (ret, err) {
                            console.log(JSON.stringify(ret));
                            if (ret.data.list && ret.data.list.length > 0) {
                                ret.data.list.forEach(list => {
                                    vm.listCategories.push({
                                        id: list.id,
                                        name: list.name
                                    })
                                })
                                vm.selectedCategories = ret.data.list[0].name;
                                vm.finished = false
                                vm.queryParam.categoryIds = [ret.data.list[0].id]
                                vm.queryParam.status = [1]
                                vm.queryParam.pageNum = 1
                                vm.initTypeSelect(ret.data.list[0].id)
                                vm.getBanner(ret.data.list[0].id)
                            } else {
                                vm.listCategories.push({
                                    id: null,
                                    name: "暂无数据"
                                })
                            }
                        });
                    },
                    initTypeSelect: function (parentId) {
                        var vm = this
                        release("getCategories")(1, parentId, vm.categoriesType, function (ret, err) {
                            ret.data.list.unshift({
                                id: -1,
                                name: '全部'
                            })
                            var data = [{
                                typeName: '类型',
                                list: ret.data.list
                            }]
                            vm.typeSelectData = data
                        });
                    },
                    getListDatas: function () {
                        let vm = this
                        var lon = 121.48
                        var lat = 31.22
                        if (vm.queryParam.location) {
                            var location = this.queryParam.location.split(',')
                            lon = location[0]
                            lat = location[1]
                        }
                        document.querySelector('.section').scrollTo(0, 0);
                        // console.log('请求参数：',JSON.stringify(vm.queryParam));
                        index.product("getListProducts")((vm.queryParam), function (ret) {
                            ret.data.list.map(item => {
                                var countDistance = getDistance(lat, lon, item.location
                                    .lat, item.location.lon)
                                countDistance = (Number(countDistance) / 1000).toFixed(
                                    0)
                                item.countDistance = countDistance > 500 ? '500km 以上' :
                                    countDistance + 'km'
                            })
                            if (vm.queryParam.pageNum == 1) {
                                vm.listData = ret.data.list
                            } else {
                                vm.listData = vm.listData.concat(ret.data.list)
                            }
                            vm.queryParam.pageNum++
                            vm.loading = false;
                            if (!ret.data.hasNext) {
                                vm.finished = true;
                            }
                        })
                    },
                    // 获取轮播
                    getBanner(categoryId) {
                        var vm = this;
                        vm.swipeList = []
                        var param = {
                            bannerType: 2,
                            channel: 0,
                            categoryId: categoryId
                        }
                        common('getBanner')(param, function (ret) {
                            console.log("轮播：" + JSON.stringify(ret))
                            vm.swipeList = ret.data
                        })
                    },
                    gotoDetail(item) {
                        api.openWin({
                            name: "goods_detail_win",
                            url: "goods_detail_win.html",
                            bounces: false,
                            pageParam: {
                                detailItem: item,
                                title: api.pageParam.title,
                                module: 'SELL_DEVICE'
                            }
                        })
                    },
                    goEdit(url, relative) {
                        if (!checkToken()) return false;
                        if (vm.authStatus.merchant == 1 || vm.authStatus.personal == 1) {
                            var editName = ''
                            if (api.pageParam.title === "SELL_DEVICE") {
                                editName = '设备出售'
                            } else if (api.pageParam.title === "LEASE_DEVICE") {
                                editName = '出租设备'
                            } else if (api.pageParam.title === "PARTS") {
                                editName = '配件'
                            }
                            api.openWin({
                                name: url,
                                url: (relative || '') + url + ".html",
                                bounces: false,
                                pageParam: {
                                    editName: editName,
                                    status: 'edit'
                                }
                            });
                        } else {
                            toastMiddle('认证通过后才可进行发布')
                        }
                    },
                    forwardPage(url, relative) {
                        var editName = ''
                        if (api.pageParam.title === "SELL_DEVICE") {
                            editName = '设备出售'
                        } else if (api.pageParam.title === "LEASE_DEVICE") {
                            editName = '出租设备'
                        } else if (api.pageParam.title === "PARTS") {
                            editName = '配件'
                        }
                        api.openWin({
                            name: url,
                            url: (relative || '') + url + ".html",
                            bounces: false,
                            pageParam: {
                                editName: editName,
                                status: 'edit'
                            }
                        });
                    },
                    forwardFrame(url, relative, options) {
                        api.openFrame({
                            name: url,
                            url: (relative || '') + url + '.html',
                            pageParam: options
                        })
                    },
                    select(index) {
                        if (index == 0) {
                            this.conditionCurIndex = this.conditionIndexObj.typeIndex
                            this.conditionName = [{
                                typeName: '类型',
                                typeId: 1
                            }]
                            this.conditionList = this.typeSelectData
                        } else if (index == 1) {
                            this.listMoreIndex.map((item, index) => {
                                this.moreList[index].list.map((it, idx) => {
                                    it.selected = (idx == item)
                                })
                            })
                            this.copyConditionInputList = JSON.parse(JSON.stringify(this.conditionInputList))
                            this.conditionList = this.moreList
                        }
                        this.wxIndex = index;
                        this.show = true;
                    },
                    selectCondition(index, item) {
                        this.conditionCurIndex = index
                        this.conditionCurItem = item
                    },
                    confirm() {
                        var item = this.conditionCurItem
                        if (this.wxIndex == 0) {
                            this.conditionIndexObj.typeIndex = this.conditionCurIndex
                            this.queryParam.typeIds = []
                            if (item.id > 0) this.queryParam.typeIds = [item.id]
                            this.queryParam.pageNum = 1
                            this.listData = []
                            this.getListDatas()
                        } else if (this.wxIndex == 1) {
                            this.conditionIndexObj.serveIndex = this.conditionCurIndex
                            this.isConfirmMore = true
                        }
                        this.show = false
                    },
                    selectconditionItem(index, conditionItem, condition) {
                        conditionItem.selected = !conditionItem.selected
                        if (!conditionItem.selected) return
                        condition.list.map((item, idx) => {
                            if (index != idx) {
                                item.selected = false
                            }
                        })
                    },
                    // 弹出层关闭
                    closePopup() {
                        if (this.isConfirmMore) {
                            var listMoreIndex = []
                            this.moreList.map(item => {
                                if (item.typeName == '新旧程度') {
                                    var index = item.list.findIndex(item => item.selected)
                                    if (index > -1) {
                                        this.queryParam.maxOldYear = item.list[index].maxOldYear
                                        this.queryParam.minOldYear = item.list[index].minOldYear
                                    }
                                    listMoreIndex.push(index)
                                } else if (item.typeName == '排序') {
                                    var index = item.list.findIndex(item => item.selected)
                                    if (index > -1) {
                                        this.queryParam.orderBy = item.list[index].orderBy
                                    }
                                    listMoreIndex.push(index)
                                }
                            })
                            this.conditionInputList.map(item => {
                                if (item.typeName == '价格（元）') {
                                    console.log(JSON.stringify(item.minVal));
                                    this.queryParam.maxPrice = item.maxVal
                                    this.queryParam.minPrice = item.minVal
                                } else if (item.typeName == '工作时长（小时）') {
                                    this.queryParam.maxWorkHour = item.maxVal
                                    this.queryParam.minWorkHour = item.minVal
                                }
                            })
                            this.listMoreIndex = listMoreIndex
                            this.listData = []
                            this.queryParam.pageNum = 1
                            this.getListDatas()
                        }else{
                            this.conditionInputList = this.copyConditionInputList
                        }
                        this.isConfirmMore = false
                    }
                }
            })
            api.addEventListener({
                name: 'selectBrand'
            }, function (ret, err) {
                if (ret.value.status == 2) return
                var brand = ret.value.brand
                vm.queryParam.brandIds = []
                if (brand.id > 0) vm.queryParam.brandIds = [brand.id]
                vm.queryParam.pageNum = 1
                vm.listData = []
                vm.getListDatas()
            });
            api.addEventListener({
                name: 'filterDistrict'
            }, function (ret, err) {
                if (ret.value.status == 2) return
                vm.queryParam.areaIds = []
                if (ret.value.city.id > 0) vm.queryParam.areaIds = [ret.value.city.id]
                vm.queryParam.pageNum = 1
                vm.listData = []
                vm.getListDatas()
            });
            api.addEventListener({
                name: 'login'
            }, function (ret, err) {
                vm.getAuthorizationStatus()
            })
        }
    </script>
</body>

</html>